<template>
<checkbox-group @change="checkboxChange">
    <div class="slide" @touchstart="touchS" @touchmove.stop="touchM($event,index)"  v-for="(item,index) of valueData" :key="index">
    
    <div class="contents_wrapper"  :data-type="item.type">
        <label class="cart_list_item" @click.stop="seletItem(index,item.goods_info.m_price,item.num)">
            <checkbox  :value="index" :checked="item.checked"/>
            <img :src="item.goods_info.thumb_Url" class="cart_list_item_pic">
            <div class="cart_list_item_right">
                <div class="cart_list_item_name">{{item.goods_info.name}}</div>
                <div class="cart_list_item_desc">{{item.goods_info.info}}</div>
                <!-- <count @numberChange="numberChange" :price="item.goods_info.m_price" :counts="9"/> -->
                <div class='count'>
                        <div>￥{{item.goods_info.m_price}}</div>
                    <div class="count_btn">
                        <div  :class="{decrease:true,decrease_least:item.num==flag}" @click.stop="decrease(index,item.goods_info.m_price)">-</div>
                        <input type="number" :value='item.num'>
                        <div class="increase" @click.stop="increase(index,item.goods_info.m_price)">+</div>
                    </div>
                </div>
            </div>
        </label>
    </div>
    <div class="delete" @click="delt">删除</div>
    </div>
</checkbox-group>
</template>
<script>
import count from '@/components/count'
export default {
    props:{
        valueData:'',
        money:0
    },
    name:'slide',//左滑删除
    data() {
        return {
            clientX1:'',//滑动开始位置
            clientX2:'',
            // del:0,//内容初始的right距离
            btnWidth:80,//删除按钮宽度
            flag:1
        }
    },
    watch: {
        money(nval){
            this.$emit('totalMoney',nval)
        }
    },
    computed: {
        
    },  
    components:{
        count
    },
    methods: {
        decrease(index,pri){  //计数器的减
            let num=Number(this.valueData[index].num)
            let price=Number(pri)
            if(num>1){
                num--
                this.$set(this.valueData[index],'num',num);
                if(this.valueData[index].checked==1){
                    this.money-=price
                }
            }
        },
        increase(index,pri){//计数器的加
            let num=Number(this.valueData[index].num);
            let price=Number(pri)
            num++
            this.$set(this.valueData[index],'num',num);
            if(this.valueData[index].checked==1){
                    this.money+=price
                }
        },
        touchS(e){
            // console.log(e)
            this.clientX1=e.clientX
        },
        touchM(e,index){
            this.clientX2=e.clientX
            let disX=this.clientX1-this.clientX2
            if (disX == 0 || disX < 0) {//如果移动距离小于等于0，说明向右滑动，文本层位置不变
                // this.del = 0;
                this.$set(this.valueData[index],'type',0)
            }
            if (disX >= this.btnWidth) {
                //控制手指移动距离最大值为删除按钮的宽度
                // this.del =this.btnWidth;
                this.$set(this.valueData[index],'type',1)
            }
            
        },
        delt(){
            console.log(8888)
        },
        checkboxChange(e) {//获取checkobx选中的value数组
            // console.log('checkbox发生change事件，携带value值为：', e.mp.detail)
            this.slideIndex=e.mp.detail.value;

        },
        seletItem(index,price,num){
            if(this.valueData[index].checked==0){
                this.$set(this.valueData[index],'checked',1)
                this.money+=num*price
            }else{
                this.$set(this.valueData[index],'checked',0)
                this.money-=num*price
            }
            console.log(this.money)
        },
        numberChange(num){
            console.log(num)
        },
    },
}
</script>
<style scoped>
    .slide{
        width: 100%;
        position: relative;
        height: 120px;
    }
    .contents_wrapper[data-type="0"]{
        right:0
    }
    .contents_wrapper[data-type="1"]{
        right:80px;
    }
    .contents_wrapper{
        width: 100%;
        height: 100%;
        position: absolute;
        transition: right 0.3s ease-in-out;
        z-index: 99;
        background: #fff
    }
    .contents{
        width: 100%;
    }
    .delete{
        color:#fff;
        height: 100%;
        text-align: center;
        width:80px;
        background: red;
        line-height: 120px;
        position: absolute;
        right:0;
    }
    .cart_list_item{
    width:100%;
    height: 100%;
    display:flex;
    flex-wrap:wrap;
    margin:0 0 0 10px;
    align-items:center;
  }
  .cart_list_item_pic{
    width:80px;
    height: 100px;
    margin-left:10px;
  }
  .cart_list_item_right{
    margin-left:10px;
    width:60%;
    height: 100%;
  }
  .cart_list_item_name{
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin:10px 0;
  }
  .cart_list_item_desc{
    margin-bottom:10px;
  }



  .count{
        width:100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .count_btn{
        margin-right:40px;
        display: flex;
        width:100px;
        height: 25px;
        line-height: 25px;
        text-align: center;
    }
    .decrease,.increase{
        border: 1px solid #eee;
        width:30px;
        height: 100%;
    }
    .decrease{
        border-radius: 5px 0 0 5px;
    }
    .increase{
        border-radius: 0 5px 5px 0;
    }
    .count_btn input{
        flex:1;
        border-top:1px solid #eee;
        border-bottom:1px solid #eee;
        height:100%;
        min-height: 0 !important;
    }
    .decrease_least{
        background:#eee;
    }
</style>